<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		
		<script type="text/javascript">
			//1. 节点的类型: 元素节点、属性节点、文本节点
			//通常情况下, 操作属性节点直接通过 "元素节点.属性名" 的方式来读写属性值
			//而不是获取属性节点. 
			
			//2. 写 JS 代码的位置
			//2.1 具体位置在哪
			//2.2 window.onload 事件被触发的时间, 
			//以及如何为该事件赋值一个相应函数
			
			//3. 获取获取元素节点
			//3.1 根据 id 获取
			//3.2 根据 标签名 获取: 该方法并非 document 对象所独有, 任何元素节点
			//都可以调用该方法, 以获取指定的子节点. 
			//3.3 根据 name 属性名来获取: 若 HTML 元素本身没有 name 属性, 
			//我们硬添加一个 name 属性, 使用 getElementsByName(name)
			//对于 ie 是不好用的。 
			
			//4. 获取子节点
			//4.1 childNodes 属性: 获取指定元素的所有子节点, 但不怎么常用.
			//4.2 firstChild、lastChild 属性: 获取元素节点的文本节点(如果一个元素
			//		节点只有一个文本子节点). 
			//4.3 使用元素节点的 getElementsByTagName("方法");
			
			//5. 读写文本节点:
			//5.1 文本节点一定是元素节点的子节点
			//5.2 步骤: 获取文本节点所在的元素节点 -> 利用 firstChild 获取文本节点
			// -> 利用节点的 nodeValue 属性来读写文本值. 
			
			//6. 节点的属性: 所有节点都有的属性(按元素节点, 属性节点, 文本节点来说明)
			//6.1 nodeType: 1, 2, 3 只读属性
			//6.2 nodeName: 返回对应的节点的名字 只读属性
			//6.3 nodeValue: null, 属性值, 文本值 可读写的属性. 
			
			//7. 属性节点: 
			//7.1 一般情况下不单独获取属性节点, 
			//而是通过 元素节点.属性名 的方式来读写属性值	
				
			window.onload = function(){
				//弹出对话框. 
				//alert("helloworld");
				
				//var bjNode = document.getElementById("bj");
				//alert(bjNode);
				
				//var liNodes = document.getElementsByTagName("li");
				//alert(liNodes.length);
				
				//var genderNodes = document.getElementsByName("gender");
				//alert(genderNodes.length);
				
				//var bjNodes = document.getElementsByName("BeiJing");
				//alert(bjNodes.length);
				
				//var cityNode = document.getElementById("city");
				//var cityLiNodes = cityNode.getElementsByTagName("li");
				//alert(cityLiNodes.length); 
				
				//var liChildren = cityNode.childNodes;
				//alert(liChildren.length);
				
				//var cityFirstChild = cityNode.firstChild;
				//alert(cityFirstChild);
				
				//var bjNode = document.getElementById("bj");
				//alert(bjNode.firstChild.nodeValue);
				//bjNode.firstChild.nodeValue = "尚硅谷";
				
				var nameNode = document.getElementsByName("username")[0];
				alert(nameNode.value);
				nameNode.value = "尚硅谷";
			}
		
		</script>
		
	</head>
	<body>
		<p>你喜欢哪个城市?</p>
		<ul id="city"><li id="bj" name="BeiJing">北京</li>
			<li>上海</li>
			<li>东京</li>
			<li>首尔</li>
		</ul>
		
		<br><br>
		<p>你喜欢哪款单机游戏?</p>
		<ul id="game">
			<li id="rl">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li>魔兽</li>
		</ul>
		
		<br><br>
		gender: 
			<input type="radio" name="gender" value="male"/>Male
			<input type="radio" name="gender" value="female"/>Female
	
		<br><br>
		name: <input type="text" name="username" value="atguigu"/>
		
	</body>
</html>	